<template>
  <a-modal :visible="visible" title="添加文件夹" @cancel="cancelClick" :footer="null" zIndex="1100">
    <a-form layout="vertical">
      <a-form-item label="名称" v-bind="validateInfos.folder_name">
        <a-input v-model:value="modelRef.folder_name" placeholder="请输入文件夹名称" :maxlength="15" />
      </a-form-item>
      <a-form-item label="类型" v-bind="validateInfos.folder_type">
        <a-select v-model:value="modelRef.folder_type" :options="typesOfOptions" placeholder="请选择文件夹类型"></a-select>
      </a-form-item>

      <a-form-item label="文件夹项目可见" v-bind="validateInfos.merchant_can_view">
        <a-radio-group v-model:value="modelRef.merchant_can_view" name="radioGroup" :disabled="modelRef.folder_type == 'audio' || modelRef.folder_type == 'text'
          ">
          <a-radio value="1">可见</a-radio>
          <a-radio value="0">不可见</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <div class="footer">
      <a-space>
        <a-button ghost type="primary" style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
          @click="cancelClick">取消</a-button>
        <a-button type="primary" class="submit-file" @click="handleOk" :loading="loading">确定</a-button>
      </a-space>
    </div>
  </a-modal>
</template>

<script>
import { reactive, toRefs, watch, defineComponent } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../../../common/utils/request";

const useForm = Form.useForm;

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },

    groupData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      loading: false,
      typesOfOptions: [
        {
          value: "video",
          label: "视频成片",
        },
      ],
    });

    const modelRef = reactive({
      folder_name: "",
      folder_type: undefined,
      merchant_can_view: "1",
    });
    const rulesRef = reactive({
      folder_name: [
        {
          required: true,
          message: "请输入文件夹名称",
        },
        {
          max: 15,
          message: "文件夹名称不能超过15个字符",
        }
      ],
      folder_type: [
        {
          required: true,
          message: "请选择文件夹类型",
        },
      ],
      merchant_can_view: [
        {
          required: true,
          message: "请选择",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    watch(
      () => modelRef.folder_type,
      (val) => {
        if (val == "audio" || val == "text") {
          modelRef.merchant_can_view = "0";
        } else {
          modelRef.merchant_can_view = "1";
        }
      }
    );

    const handleOk = () => {
      validate().then(() => {
        state.loading = true;
        modelRef.folder_use_type = 2;
        modelRef.group_id = props.groupData.group_id;
        modelRef.merchant_library_id = props.groupData.merchant_library_id;
        request
          .post("/work_ai", "/user/shotstack/folder", modelRef)
          .then((res) => {
            message.success("创建成功");
            resetFields();
            emit("onSubmit");
            state.loading = false;
          })
          .finally(() => {
            state.loading = false;
          });
      });
    };

    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };

    return {
      ...toRefs(state),
      handleOk,
      cancelClick,
      validateInfos,
      modelRef,
      resetFields,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 20px;

  .submit-file {
    background: #2878ff;
    border: none;
    border-radius: 5px;
  }
}
</style>
